<template>
    <div class="main">
        <ul id="ul">
            <li class="clear" v-for="(item,index) in plusList">
				<div><mt-switch @change="onChang(item.id)" :value="$store.getters.getGoodsselsted[item.id]"></mt-switch></div>	
				<div>
                    <img :src="item.thumb_path" height="100" width="100">
                </div>	
                <div>
                     <h4 class="text">{{item.title}}</h4>
                     <p>￥{{item.sell_price}}</p>
                     <p>
                         <div class="mui-numbox" data-numbox-min='1' data-numbox-max='9'>
					            <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
					            <input  class="mui-input-numbox" type="number" :value="$store.getters.getGoodsnumber[item.id]" @change="changeValue(index,item.id)" ref="inp"/>
					            <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
				         </div>
                         <a href="#" @click.prevent="removeId(item.id,index)">删除</a>
                     </p>
                </div>	
			</li>
        </ul>

          <div class="list-group" id="footer">
            <div class="list-group-item ">
                <h4 class="list-group-item-heading mui-pull-left">
                    <p>已经选中&nbsp;<span>{{$store.getters.getCountAndPrice.connt}}</span>&nbsp;件</p>
                    <p>合计:￥&nbsp;<span>{{$store.getters.getCountAndPrice.price}}</span>&nbsp;(不包含运费)</p>
                </h4>
                <p class="list-group-item-text pull-right">
                    <button class="btn btn-danger " type="submit">
                        结算
                    </button>
                </p>
            </div>
        </div>
    </div>

</template>

<script>
    import $ from 'jquery';
    import mui from './../../dist/js/mui.js';
    
    export default {
        data(){
            return{
            plusList:[],
            str:'',
            }

        },
        methods:{
            getApi(){
                 var idArr=[];
                 this.$store.state.shopCar.forEach((item,index) => {
                     idArr[index]=item.id;
                 });
                 this.str=idArr.join(",")
            },
             get(){
                 if(this.str!==''){
                    this.$http.get('api/goods/getshopcarlist/'+this.str).then(
                    result=>{
                    if(result.body.status==0){
                       this.plusList=result.body.message;
                       //console.log(this.plusList);
                    }else{
                       //console.log("失败");
                    } 
                    })
                }else{
                    console.log('请添加你要购买的东西');
                } 
            },
           removeId(id,index){
            this.$store.commit('removeCar',id);
            this.plusList.splice(index,1);
           },
           onChang(id){
               this.$store.commit('chang',id);
           },
           changeValue(index,id){
             var num =mui(mui(".mui-numbox")[index]).numbox().getValue(); 
             var obj = {
                 id:id,
                 num:num,
             }
             this.$store.commit('changeNumberInput',obj);
           }
        },
        created(){
            this.getApi()
            this.get();
           
        },
         updated: function () {
             mui(".mui-numbox").numbox(); 
        }
    }
</script>

<style scoped>



ul{
    margin: 0px 0px 145px 0px;
    padding: 0;
    
}
li {
    background: white;
    margin-top: 10px;
}
.clear:after{
content:"";
display:block;
clear:both;
}
li>div{
    float: left;
    
}
li>div:nth-of-type(1){
  margin:50px 10px 0px 10px; 
   
}
li>div:nth-of-type(2){
   margin-top: 15px;
}
li>div:nth-of-type(3){
   margin-top: 15px;
   margin-left: 10px;
   width: 170px;
   
}
.text{
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow:ellipsis;
    }
/*脚步 */
.list-group-item{
    margin-top: 10px;
    height:80px;
    padding-top:20px;

}
    .span{
        font-size: 16px;
        color: #797979;
    }
    .mt-field{
        width: 50px;
        padding: 2px;
        height: 34px;

    }
    .form-control{
        text-align: center;
    }
    .input-group{
        width: 110px;
        height: 30px;
    }
.main{
    position: relative;
}
#footer{
position: fixed;
bottom: 33px;
width: 100%;
}
.list-group-item-heading p span{
 color: red;
 
}
</style>